<template>
  <div class="page-component">
    <h3 class="page-title">个人资料</h3>
    <el-card>
      <div id="Editor"></div>
      <el-button type="primary">保存</el-button>
    </el-card>
  </div>
</template>

<script>
import wangEditor from 'wangeditor'
import { getToken } from '@/utils/auth'
console.log(getToken());
export default {
  data() {
    return {
      editor: null,
      editorData: "",
    };
  },
  mounted() {
    const editor = new wangEditor(`#Editor`);
    this.editor = editor;
    //配置上传图片的接口地址
    this.editor.config.uploadImgServer = `http://localhost:3003/upload/image`;
    this.editor.config.uploadFileName = "myfile";
    this.editor.config.uploadImgHeaders = {
      authorization: "Bearer " + localStorage.token,
    };
    //设置富文本编辑器高度
    // this.editor.config.height = 600
    //设置提示文字
    this.editor.config.placeholder = "编辑文章内容";
    this.editor.config.customUploadImg = function (files, insert) {
      files.forEach((item) => {
        let fd = new FormData();
        fd.append("myfile", item); // 上传的文件： 键名，键值 // 以下是上传图片的接口，视情况而更改就可以啦                                                     teachService.FileUploadInTencent(fd).then((data) => { // 上传代码返回结果之后，将图片插入到编辑器中
        Article.uploadImg(fd).then((res) => {
          insert(res.file.url);
        });
      });
    };
    this.editor.create();
  },
  methods: {
    getEditorData() {
      // 通过代码获取编辑器内容
      let data = this.editor.txt.html();
      alert(data);
    },
  },
  beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy();
    this.editor = null;
  },
};
</script>

<style lang="scss" scoped>
</style>